<template>
  <div class="container">
    <div class="top">
      <div>
        <el-image style="width: 100px; height: 100px" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" />
      </div>
      <div>首页</div>
      <div>
        <el-input
            v-model="input3"
            style="max-width: 600px"
            placeholder="Please input"
            class="input-with-select"
        >
          <template #append>
            <el-button :icon="Search" />
          </template>
        </el-input>
      </div>

    </div>
    <div class="content">
      <div class="title">视频</div>
      <div class="videos">
        <div class="video">
          <el-image style="width: 100px; height: 100px" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" />
        </div>
        <div class="video">
          <el-image style="width: 100px; height: 100px" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" />
        </div>
        <div class="video">
          <el-image style="width: 100px; height: 100px" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" />
        </div>
        <div class="video">
          <el-image style="width: 100px; height: 100px" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" />
        </div>

        <div class="video">
          <el-image style="width: 100px; height: 100px" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" />
        </div>
        <div class="video">
          <el-image style="width: 100px; height: 100px" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {Search} from "@element-plus/icons-vue";
</script>

<style scoped lang="scss">
.container{
  width: 100%;
  height: 100%;
  background: #dadada;

}
.top{
  width: 100%;
  background: #383838;
  display: flex;
  align-items: center;
  justify-content: center;
}
.content{
  background: #1c84c6;
  left: 10px;
  right: 10px;
  width: 90%;
  margin: 0 auto;
}
.title{
  height: 7%;
  background: #97a8be;
}
.videos{
  width: 100%;
  background: #30B08F;
  display: flex;
  flex-flow: row wrap;
}
.video{
  flex:auto;
  width: 100px;
  height: 200px;
  background: #383838;
}
</style>

